<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>my-picker.js</title>
  <meta name="description" content="高仿IOS的PickerView的JavaScript插件，3D形式的滚轮选择器，同时支持最多三级联动的选择效果，支持pc端和移动端两种平台浏览器。">
  <meta name="author" content="laden666666" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" media="screen" href="css/style.css">
  <link rel="stylesheet" media="screen" href="../../dist/my-picker.css">
</head>
<body>

  <header class="c-header">
    <div id="header-background" class="background"></div>
    <div class="content">
      <h1 class="title">picker</h1>
      <p class="describe">home页的例子的代码</p>
      <div class="btns">
      </div>
    </div>
  </header>

  <div class="c-content">
    <div class="example">
      <h4 class="title">简单的选择器:</h4>
      <p class="describe">可以设置简单的选择器,高仿IOS的PickerView控件,3D形式的滚轮选择器。</p>
      <a id="example1" class="selector" placeholder="请选择你喜欢的编程语言"></a>
    </div>

    <div class="example">
      <h4 class="title">带前缀与后缀的选择器:</h4>
      <p class="describe">可以让选择器的滚轮左右两边设置固定的显示值,实现对选择器增加统一的单位、称呼、序列的文案。</p>
      <a id="example2" class="selector" placeholder="选择要阅读的章节"></a>
    </div>

    <div class="example">
      <h4 class="title">多滚轮的选择器:</h4>
      <p class="describe">支持多个滚轮同时选择,并且每个滚轮都是3d的,而且还有水平方向的透视效果。建议滚轮最多只能设置3个,否则可能会出现显示异常</p>
      <a id="example3" class="selector" placeholder="请选择年级和班级"></a>
      <code></code>
    </div>

    <div class="example">
      <h4 class="title">设置默认值及动态设置:</h4>
      <p class="describe">通过api可以设置默认值,并且可以通过api代替用户选择所选值。如下边的例子,两个picker通过相互调用api,给对方设置值,让两个选择器值保存同步。</p>
      <a id="example4_1" class="selector">2</a>
      <a id="example4_2" class="selector">2</a>
    </div>

    <div class="example">
      <h4 class="title">动态设置选择器的可选值</h4>
      <p class="describe">通过api可以动态修改可选值。下边的例子中,每选择一次,都会修改可选值列表。</p>
      <a id="example5" class="selector" placeholder="请选择任意值"></a>
    </div>

    <div class="example">
      <h4 class="title">label和value的选择器</h4>
      <p class="describe">picker不但可以选择字符串数组,还支持选择json,不过必须要提供json的属性中的label和value的key。</p>
      <a id="example6" class="selector" placeholder="请选择人员的userId"></a>
    </div>

    <div class="example">
      <h4 class="title">级联选择器</h4>
      <p class="describe">通过api修改可选值,可以实现级联选择的功能。</p>
      <a id="example7" class="selector" placeholder="请选择你最喜欢的运动员"></a>
    </div>

    <div class="example">
      <h4 class="title">构建简单的日期选择器</h4>
      <p class="describe">基于picker控件,可以进一步封装出更多选择器控件。这里是一个日期选择控件的例子,代码实现仅做参考。</p>
      <a id="example8" class="selector" placeholder="请选择日期"></a>
    </div>
  </div>

  <!-- scripts -->
  <script src="../../dist/my-picker.min.js"></script>
  <script src="js/app.js"></script>


</body>
</html>